<template>
	<view class="expert-rank flex-r">
		<template v-if="!list[0]">
			<!-- 默认插槽，用来展示空内容和刷新按钮 -->
			<slot></slot>
		</template>
		<template v-else>
			<!-- 左侧联赛列表 -->
			<view class="season-list" @touchstart.stop>
				<view class="season-list-item flex-r ac" v-for="(season, index) in list" :key="index" :class="{'active': active == index}" @tap="leftChange(index)">
					<text class="season-name text-small text-hidden">{{season.seasonName}}</text>
				</view>
			</view>
			<!-- 右侧专家排行榜 -->
			<view class="expert-list" id="expertlist">
				<template v-for="(season, index) in list">
					<keep-alive>
					<view class="expert" v-if="active == index" :key="index" :id="'season'+index">
						<view class="expert-list-head thinborder">
							<text class="text-regular">{{season.seasonName}}</text>
						</view>
						<view class="expert-list-item thinborder" v-for="(expert, indexs) in expertList[active]" :key="indexs">
							<view class="expert-des-head flex-r ac">
								<view class="author-image border-round" @tap="$CHS.goExpertHome(expert.expertId, 'expert')">
									<lazy-image class="inheritwh border-round" :src="expert.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
									<image v-if="indexs < 3" class="rank-icon" :src="require('@/public/images/expert/rank_'+indexs+'.png')" mode="aspectFit"></image>
								</view>
								<view class="author-info flex-c">
									<view class="info-top flex-r ac">
										<text class="text-primary">{{expert.expertName}}</text>
										<image v-if="expert.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
										<text class="tag-red" v-if="expert.hotContineTxt">{{expert.hotContineTxt}}</text>
									</view>
									<view class="info-detail text-info color-grey text-hidden">
										{{expert.remark}}
									</view>
								</view>
								<view class="author-result flex-c color-red" v-if="Number(expert.hitRate) >= 60">
									<view class="result-rate flex-r">
										<text class="text-num">{{expert.hitRate}}</text>
										<text class="text-mini">%</text>
									</view>
									<text class="text-info">联赛命中率</text>
								</view>
							</view>
							<view class="expert-des-body flex-r">
								<view class="author-fav">
									<button v-if="(expert.followStatus == 1 && noFollow.indexOf(expert.expertId) < 0) || isFollow.indexOf(expert.expertId) > -1"  class="favbtn" :class="{'nochat': expert.userIdentity != 1}" @tap.stop="$CHS.goChat(expert.expertId, expert.userIdentity)">私信</button>
									<button v-else class="favbtn" @tap.stop="favExpert(expert.expertId)">+关注</button>
								</view>
								<view class="author-tag flex-c text-mini">
									<view class="tag-top flex-r ac">
										<text class="hit-result" v-if="expert.hitResultTxt">{{expert.hitResultTxt}}</text>
										<view class="red-history flex-r ac" v-if="expert.maxHitNum">
											<text class="color-white">联赛历史连红</text>
											<text class="bg-white color-red">{{expert.maxHitNum}}连红</text>
										</view>
									</view>
									<!-- <view class="article-num flex-r ac" @tap.stop="goSeasonArticle(expert.expertId, season)">
										<text class="color-white">联赛方案</text>
										<view class="right-view flex-r ac">
											<text class="color-primary">{{expert.totalSum || 0}}篇</text>
											<image class="right-icon" src="@/public/images/expert/yjt.png" mode="aspectFit"></image>
										</view>
									</view> -->
									<view class="expert-article text-mini flex-r ac jsb">
										<view class="flex-r ac">
											<text>近7天有</text>
											<text class="color-blue">{{expert.newArticleNum || 0}}</text>
											<text>条最新方案</text>
										</view>
										<image class="icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</view>
						<EmptyContent v-if="!expertList[active] || !expertList[active][0]" top="240rpx" text="该赛季场次较少，未有排名" img="qsy_zwxl" :showRefresh="false" @refresh="leftChange(index)"></EmptyContent>
					</view>
					</keep-alive>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	/**
	 * ExpertRank 专家联赛排行榜
	 * @description 联赛排行榜专家列表
	 * @property {Array} list 联赛列表数据
	 * @event {Function} scroll 回调通知触发滚动到顶部
	 * @example <ExpertRank :list="list"></ExpertRank>
	 */
	export default {
		name: "ExpertRank",
		emits: ['scroll'],
		props: {
			list: {
				type: [Array,Object],
				default: ()=>[]
			}
		},
		data() {
			return {
				isFaving: null ,//防止重复关注
				expertList: [],
				
				active: 0
			}
		},
		computed: {
			noFollow() {
				return this.$store.state.expertNoFollow
			},
			isFollow() {
				return this.$store.state.expertFollow
			},
			user() {
				return this.$store.state.user
			}
		},
		watch: {
			list(newValue) {
				if(newValue[this.active]){
					this.getSeasonRank(newValue[this.active], this.active, true)
				}
			}
		},
		methods: {
			/**
			 * @description 查询联赛排行数据
			 * @param {object} season 联赛对象：{sportId, seasonId}
			 * @param {number} index 索引
			 * @param {boolean} refresh 是否强制刷新
			 * @param {boolean} scroll 是否滚动到顶部
			 */
			getSeasonRank(season, index, refresh, scroll){
				if(!this.expertList[index] || refresh){
					this.$http.get({
						url: '/api/appUser/querySeasonExpertRankRows',
						data: {
							sportId: season.sportId,
							seasonId: season.seasonId,
							userId: this.user.userId
						}
					}).then((data)=>{
						console.log(data);
						if(data.success && data.result && data.result[0]){
							this.$set(this.expertList, index, data.result)
							if(refresh || scroll){
								//数据更新后，触发回调滚动到页面顶部
								this.$nextTick(()=>{
									this.$emit('scroll', {top: 0})
								})
							}
						}
					})
				}else if(scroll){
					//触发回调滚动到页面顶部
					this.$emit('scroll', {top: 0})
				}
			},
			/**
			 * @description 左侧切换联赛
			 * @param {number} index 联赛索引
			 */
			leftChange(index){
				console.log(this.expertList[index]);
				this.active = index
				this.getSeasonRank(this.list[index], index, false, true)
			},
			/**
			 * @description 关注专家
			 * @param {string} eid 专家ID
			 */
			favExpert(eid) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(eid === this.isFaving){
					return
				}else{
					this.isFaving = eid
					this.$CHS.favExpert(eid).finally(()=>{
						this.isFaving = null
					})
				}
			},
			/**
			 * @description 跳转专家主页
			 * @param {string} expertId 专家ID
			 */
			goExpertHome(expertId) {
				let pages = getCurrentPages()
				// 此处跳转需携带联赛信息
				let params = {eid: expertId, random: Date.now(), seasonId: this.list[this.active].seasonId, sportId: this.list[this.active].sportId}
				if(pages.length < 8){
					this.$Router.push({name: 'experthome', params})
				}else{
					this.$Router.replace({name: 'experthome', params})
				}
			},
			/**
			 * @description 打开专家联赛方案列表
			 * @param {string} expertId 专家ID
			 * @param {object} season 联赛信息
			 */
			goSeasonArticle(expertId, season) {
				console.log(season);
				this.$goByName('seasonarticle', {eid: expertId, sport: season.sportId, sid: season.seasonId})
			},
			//页面滚动，弃用
			scrollPage(scroll) {
				let seasonId = 'season'+this.active
				uni.createSelectorQuery().select('#expertlist').boundingClientRect(data => {
					uni.createSelectorQuery().select('#'+seasonId).boundingClientRect(res => {
						if(res){
							if(scroll){
								this.$emit('scroll', {
									top: res.top - data.top,
									index: this.active
								})
							}
						}
				　　}).exec()
				}).exec()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.expert-rank{
		/deep/ .empty-content{
			flex: 2;
		}
	}
	.season-list{
		position: fixed;
		height: calc(var(--safe-height) - #{$navbar-height});
		overflow-y: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		.season-list-item{
			width: 160rpx;
			height: 88rpx;
			background: #F2F5FA;
			&.active{
				background: #FFFFFF;
			}
			.season-name{
				margin: 0 30rpx;
				max-width: 100rpx;
				white-space: nowrap;
			}
		}
	}
	.season-list::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
	}
	.expert-list{
		background-color: #FFFFFF;
		margin-left: 160rpx;
		width: 590rpx;
		min-height:  calc(var(--safe-height) - #{$navbar-height});
		.expert{
			padding: 0 20rpx 20rpx 30rpx;
		}
		.expert-list-head{
			height: 88rpx;
			line-height: 88rpx;
			font-weight: 500;
			//border-bottom: 1rpx solid #ededed;
		}
		.expert-list-item{
			//border-bottom: 1rpx solid #ededed;
			padding: 30rpx 0;
			.expert-des-head{
				.author-image{
					width: 88rpx;
					height: 88rpx;
					background-color: #FFFFFF;
					background-size: 100%;
					position: relative;
					.rank-icon{
						position: absolute;
						bottom: 0;
						left: 0;
						width: 98rpx;
						height: 98rpx;
					}
				}
				.author-info{
					flex: 2;
					margin-left: 20rpx;
					.info-top{
						font-weight: 500;
						image{
							margin-left: 7rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
					.info-detail{
						max-width: 265rpx;
						margin-top: 20rpx;
					}
				}
				.author-result{
					align-items: flex-end;
					.result-rate{
						align-items: flex-end;
						margin-bottom: 15rpx;
						.text-num{
							font-size: 36rpx;
							font-weight: 500;
						}
					}
				}
			}
			.expert-des-body{
				margin-top: 10rpx;
				.author-fav{
					.favbtn{
						width: 88rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: #E5EEFF;
						font-size: 20rpx;
						color: #0055FF;
						margin: 0;
						padding: 0;
						border: none;
						border-radius: 24rpx;
						box-sizing: border-box;
						&.nochat{
							color: #99BBFF;
						}
					}
				}
				.author-tag{
					margin-left: 20rpx;
					white-space: nowrap;
					flex: 2;
					.tag-top{
						.hit-result{
							padding: 0 10rpx;
							height: 36rpx;
							line-height: 36rpx;
							background: linear-gradient(-90deg, #8C0000 0%, #330000 100%);
							border-radius: 4rpx;
							font-weight: 500;
							color: #F2E9C2;
						}
						.red-history{
							margin-left: 10rpx;
							padding-left: 10rpx;
							height: 36rpx;
							line-height: 36rpx;
							border-radius: 4rpx;
							background: #F23030;
							box-sizing: border-box;
							.bg-white{
								padding: 0 10rpx;
								margin-right: 2rpx;
								height: 32rpx;
								line-height: 32rpx;
								background-color: #FFFFFF;
								border-radius: 0 4rpx 4rpx 0;
								margin-left: 10rpx;
								box-sizing: border-box;
							}
						}
					}
					.article-num{
						margin-top: 15rpx;
						padding-left: 10rpx;
						height: 36rpx;
						width: fit-content;
						line-height: 36rpx;
						background: #0055FF;
						border-radius: 4rpx;
						box-sizing: border-box;
						.right-view{
							padding: 0 10rpx;
							margin-right: 2rpx;
							height: 32rpx;
							line-height: 32rpx;
							background-color: #FFFFFF;
							border-radius: 0 4rpx 4rpx 0;
							margin-left: 10rpx;
							box-sizing: border-box;
							.right-icon{
								margin-left: 20rpx;
								width: 12rpx;
								height: 12rpx;
							}
						}
					}
					.expert-article{
						margin-top: 15rpx;
						height: 48rpx;
						background: #F2F5FA;
						border-radius: 6rpx;
						padding: 0 20rpx;
						color: #5C7099;
						.icon{
							width: 25rpx;
							height: 26rpx;
						}
					}
				}
			}
		}
		.expert-list-item:last-child{
			&.thinborder{
				&::after{
					content: unset;
				}
			}
		}
	}
</style>
